<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>CSS | Lemonxu's Blog</title><meta name="author" content="Lemonxu"><meta name="copyright" content="Lemonxu"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="CSS基础css，也就是层叠样式表，用于设计风格和布局。 基本知识语法CSS的定义由三部分组成，包括选择器（selector）、属性（properties）、属性值（value）。 12345选择器&amp;#123;    属性1:属性值1;    属性2:属性值2;    ……&amp;#125;  声明：一个属性与值的键值（color:red） 注释：单行注释&#x2F;* 单行注释 *&#x2F;，多行注释 &#x2F;* 在里面直接">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS">
<meta property="og:url" content="https://lemonxu.eu.org/2023/06/16/CSS/CSS/index.html">
<meta property="og:site_name" content="Lemonxu&#39;s Blog">
<meta property="og:description" content="CSS基础css，也就是层叠样式表，用于设计风格和布局。 基本知识语法CSS的定义由三部分组成，包括选择器（selector）、属性（properties）、属性值（value）。 12345选择器&amp;#123;    属性1:属性值1;    属性2:属性值2;    ……&amp;#125;  声明：一个属性与值的键值（color:red） 注释：单行注释&#x2F;* 单行注释 *&#x2F;，多行注释 &#x2F;* 在里面直接">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://lemonxu.eu.org/images/bg/649.jpg">
<meta property="article:published_time" content="2023-06-16T03:57:58.000Z">
<meta property="article:modified_time" content="2023-06-25T09:38:29.225Z">
<meta property="article:author" content="Lemonxu">
<meta property="article:tag" content="CSS, 基础">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://lemonxu.eu.org/images/bg/649.jpg"><link rel="shortcut icon" href="/blog/images/favicon-32x32-next.png"><link rel="canonical" href="https://lemonxu.eu.org/2023/06/16/CSS/CSS/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//hm.baidu.com"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><meta name="baidu-site-verification" content="codeva-aqnyzLi7SQ"/><meta name="msvalidate.01" content="2A101DE4CB69400C01A80B1A89A62400"/><link rel="stylesheet" href="/blog/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?86df0317d9503122cab4c4dc5e8dcb55";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script><script>const GLOBAL_CONFIG = {
  root: '/blog/',
  algolia: undefined,
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":200},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: true,
  islazyload: false,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'CSS',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-06-25 17:38:29'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = url
      if (id) link.id = id
      link.onerror = reject
      link.onload = link.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        link.onload = link.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(link)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 6.3.0"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/blog/images/user.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/blog/archives/"><div class="headline">文章</div><div class="length-num">4</div></a><a href="/blog/tags/"><div class="headline">标签</div><div class="length-num">4</div></a><a href="/blog/categories/"><div class="headline">分类</div><div class="length-num">8</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/blog/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/blog/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/blog/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/blog/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/blog/link/"><i class="fa-fw fas fa-link"></i><span> 友情链接</span></a></div><div class="menus_item"><a class="site-page" href="/blog/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('/blog/images/bg/649.jpg')"><nav id="nav"><span id="blog-info"><a href="/blog/" title="Lemonxu's Blog"><span class="site-name">Lemonxu's Blog</span></a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="/blog/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/blog/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/blog/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/blog/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/blog/link/"><i class="fa-fw fas fa-link"></i><span> 友情链接</span></a></div><div class="menus_item"><a class="site-page" href="/blog/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">CSS</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-06-16T03:57:58.000Z" title="发表于 2023-06-16 11:57:58">2023-06-16</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-06-25T09:38:29.225Z" title="更新于 2023-06-25 17:38:29">2023-06-25</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/blog/categories/%E5%89%8D%E7%AB%AF/">前端</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/blog/categories/%E5%89%8D%E7%AB%AF/%E5%9F%BA%E7%A1%80/">基础</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/blog/categories/%E5%89%8D%E7%AB%AF/%E5%9F%BA%E7%A1%80/CSS/">CSS</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">3k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>12分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="CSS"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="CSS基础"><a href="#CSS基础" class="headerlink" title="CSS基础"></a>CSS基础</h1><p>css，也就是层叠样式表，用于设计风格和布局。</p>
<h2 id="基本知识"><a href="#基本知识" class="headerlink" title="基本知识"></a>基本知识</h2><h3 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h3><p>CSS的定义由三部分组成，包括选择器（selector）、属性（properties）、属性值（value）。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">选择器&#123;</span><br><span class="line">    属性<span class="number">1</span>:属性值<span class="number">1</span>;</span><br><span class="line">    属性<span class="number">2</span>:属性值<span class="number">2</span>;</span><br><span class="line">    ……</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>声明：一个属性与值的键值（color:red）</p>
<p>注释：单行注释<code>/* 单行注释 */</code>，多行注释 <code>/* 在里面直接换行就行 */</code></p>
<h3 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h3><h4 id="选择器分类"><a href="#选择器分类" class="headerlink" title="选择器分类"></a>选择器分类</h4><p>​    基本选择器（标签选择器、类选择器、id选择器）、属性选择器、层级选择器、组合选择器、伪类选择器、通配符；</p>
<h4 id="选择器优先级"><a href="#选择器优先级" class="headerlink" title="选择器优先级"></a>选择器优先级</h4><blockquote>
<p>选择器的优先级大小如下：</p>
<p>10000	!important</p>
<p>01000	行内样式	</p>
<p>00100	id选择器 </p>
<p>00010	类选择器&#x2F;伪类选择器&#x2F;属性选择器</p>
<p>00001	标签选择器&#x2F;元素选择器&#x2F;伪元素选择器</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*基本选择器 3种类型*/</span></span><br><span class="line">	<span class="comment">/*标签选择器：标签名&#123;&#125;*/</span></span><br><span class="line">    <span class="selector-tag">div</span>&#123;</span><br><span class="line">        <span class="attribute">color</span>: red;</span><br><span class="line">    &#125;</span><br><span class="line">	<span class="comment">/*类选择器：类名&#123;&#125;*/</span></span><br><span class="line">    <span class="selector-class">.image</span>&#123;</span><br><span class="line">        <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">	<span class="comment">/*id选择器：#id名&#123;&#125;*/</span></span><br><span class="line">    <span class="selector-id">#p-id</span>&#123;</span><br><span class="line">        <span class="attribute">color</span>: blue;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*属性选择器 [属性名]&#123;&#125;*/</span></span><br><span class="line"><span class="selector-attr">[title]</span>&#123; <span class="comment">/*具有title属性的元素*/</span></span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-attr">[href^=<span class="string">&quot;http&quot;</span>]</span>&#123; <span class="comment">/*以http开头的元素*/</span></span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-attr">[href$=<span class="string">&quot;cn&quot;</span>]</span>&#123; <span class="comment">/*以...为结束*/</span></span><br><span class="line">    <span class="attribute">color</span>: blue;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-attr">[href*=<span class="string">&quot;i&quot;</span>]</span>&#123; <span class="comment">/*href中包含i的 */</span></span><br><span class="line">    <span class="attribute">color</span>: yellow;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**层级选择器 */</span></span><br><span class="line">    <span class="comment">/*祖宗后代/父子选择器  */</span></span><br><span class="line">    <span class="selector-tag">div</span> <span class="selector-tag">p</span>&#123;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">/* 兄弟选择器 */</span></span><br><span class="line">    <span class="selector-tag">div</span>~<span class="selector-tag">p</span>&#123;</span><br><span class="line">        <span class="attribute">color</span>: green;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">/* 跟班选择器 */</span></span><br><span class="line">    <span class="selector-tag">p</span>+<span class="selector-tag">span</span>&#123;</span><br><span class="line">        <span class="attribute">color</span>: yellow;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="comment">/* 以下是层级选择器对应的html */</span></span><br><span class="line">    &lt;<span class="selector-tag">div</span>&gt;</span><br><span class="line">        &lt;<span class="selector-tag">p</span>&gt;我是<span class="selector-tag">div</span>的子标签</span><br><span class="line">            &lt;<span class="selector-tag">p</span>&gt;我是<span class="selector-tag">div</span>的孙标签（后代）&lt;/<span class="selector-tag">p</span>&gt;</span><br><span class="line">        &lt;/<span class="selector-tag">p</span>&gt;</span><br><span class="line">    &lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">    &lt;<span class="selector-tag">p</span>&gt;我是<span class="selector-tag">div</span>的兄弟标签&lt;/<span class="selector-tag">p</span>&gt;</span><br><span class="line">    &lt;<span class="selector-tag">span</span>&gt;我是<span class="selector-tag">p</span>的跟班标签&lt;/<span class="selector-tag">span</span>&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 组合选择器 */</span></span><br><span class="line">    <span class="selector-tag">div</span> <span class="selector-tag">span</span>, <span class="selector-tag">p</span> <span class="selector-tag">span</span>&#123;</span><br><span class="line">        <span class="attribute">color</span>: red;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="comment">/* 组合选择器对应的html案例 */</span></span><br><span class="line">    &lt;<span class="selector-tag">div</span>&gt;</span><br><span class="line">        &lt;<span class="selector-tag">span</span>&gt;第一个<span class="selector-tag">span</span>&lt;/<span class="selector-tag">span</span>&gt;</span><br><span class="line">    &lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">    &lt;<span class="selector-tag">p</span>&gt;</span><br><span class="line">        &lt;<span class="selector-tag">span</span>&gt;我是红色的字&lt;/<span class="selector-tag">span</span>&gt;</span><br><span class="line">    &lt;/<span class="selector-tag">P</span>&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 伪类选择器 */</span></span><br><span class="line">    <span class="comment">/* 第一个p元素 */</span></span><br><span class="line">    <span class="selector-tag">p</span><span class="selector-pseudo">:nth-of-type</span>(<span class="number">1</span>)&#123;</span><br><span class="line">        <span class="attribute">color</span>:red;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">/* 默认被点击状态 */</span></span><br><span class="line">    <span class="selector-tag">a</span><span class="selector-pseudo">:link</span>&#123;</span><br><span class="line">        <span class="attribute">color</span>: yellowGreen;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 通配符 */</span></span><br><span class="line">    <span class="comment">/* 通配符作用在所有标签上，开发并不建议使用，影响网页的渲染性能 */</span></span><br><span class="line">    *&#123;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*伪元素选择器:部分行内元素和块级元素可以使用，例如div、p、img、strong等*/</span></span><br><span class="line">    <span class="selector-tag">div</span><span class="selector-pseudo">::before</span>&#123;</span><br><span class="line">        <span class="attribute">content</span>: <span class="string">&quot;开始&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">	</span><br></pre></td></tr></table></figure>

<h3 id="盒模型"><a href="#盒模型" class="headerlink" title="盒模型"></a>盒模型</h3><p><strong>标准盒模型</strong>：盒子的实际尺寸 &#x3D; 内容（设置的宽高） + 内边距 + 边框；</p>
<p><strong>IE盒模型</strong>：盒子的实际尺寸 &#x3D; 设置的宽&#x2F;高 &#x3D; 内容 + 内边距 + 边框；</p>
<p>box-sizing:content-box(标准盒模型)、border-box（IE盒模型）；</p>
<h3 id="规则"><a href="#规则" class="headerlink" title="@规则"></a>@规则</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* @media 满足媒介查询的条件则条件规则组里的规则生效 */</span></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">min-width</span>: <span class="number">600px</span>)&#123;</span><br><span class="line">    <span class="attribute">background</span>: blue;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* @namespace 命名空间 告诉CSS引擎必须考虑XML命名空间 */</span></span><br><span class="line">	<span class="comment">/*Default namespace*/</span></span><br><span class="line">	<span class="keyword">@namespace</span> url(XML-namespace-URL);</span><br><span class="line">	<span class="keyword">@namespace</span> <span class="string">&quot;XML-namespace-URL&quot;</span>;</span><br><span class="line">	<span class="comment">/*prefixed namespace*/</span></span><br><span class="line">	<span class="keyword">@namespace</span> prefix url(XML-namespace-URL);</span><br><span class="line">    <span class="keyword">@namespace</span> prefix <span class="string">&quot;XML-namespace-URL&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*@page 描述打印文档时布局的变化,只能修改文档的margin、orphans、widows 和分页符*/</span></span><br><span class="line"><span class="keyword">@page</span> &#123;</span><br><span class="line">    <span class="attribute">margin-top</span>:<span class="number">200px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*要更改打印的样式还有另一种方式，使用@media print*/</span></span><br><span class="line"><span class="keyword">@media</span> print &#123;</span><br><span class="line">    <span class="selector-tag">img</span><span class="selector-pseudo">::before</span>&#123;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*@font-face 描述将下载的外部的字体,下面是阿里图标的导入案例*/</span></span><br><span class="line"><span class="keyword">@font-face</span> &#123;</span><br><span class="line">  <span class="attribute">font-family</span>: <span class="string">&quot;iconfont&quot;</span>; <span class="comment">/* Project id 3700215 */</span></span><br><span class="line">  <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">&#x27;iconfont.woff2?t=1677138395895&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;woff2&#x27;</span>),</span><br><span class="line">       <span class="built_in">url</span>(<span class="string">&#x27;iconfont.woff?t=1677138395895&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;woff&#x27;</span>),</span><br><span class="line">       <span class="built_in">url</span>(<span class="string">&#x27;iconfont.ttf?t=1677138395895&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;truetype&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*@keyframes 描述CSS动画的关键帧，搭配animation使用，注意0%&#123;&#125;后面不要写分号哦，否则后面的样式无效*/</span></span><br><span class="line"><span class="comment">/*关键帧中的!important将会被忽略*/</span></span><br><span class="line"><span class="keyword">@keyframes</span> shink&#123;</span><br><span class="line">    <span class="number">0%</span>&#123;<span class="attribute">color</span>:red&#125; <span class="comment">/*等同于from*/</span></span><br><span class="line">    <span class="number">50%</span>&#123;<span class="attribute">color</span>:blue&#125;</span><br><span class="line">    <span class="number">100%</span>&#123;<span class="attribute">color</span>:green&#125; <span class="comment">/*等同于to*/</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*@document 如果文档样式表满足给定条件则条件规则里的规则生效, 这是个实验性技术，在Level3被初始化，后被推迟到Level4，但随后被移除*/</span></span><br><span class="line"><span class="keyword">@document</span> url(<span class="string">&quot;https://www.example.com/&quot;</span>)&#123;</span><br><span class="line">    <span class="selector-tag">h1</span>&#123;<span class="attribute">color</span>:red;&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*@charset 用于定义样式表使用的字符集，必须是样式表中的第一个元素，前面不得有任何字符。因为它不是嵌套语句，所以不能在@规则条件组中使用。 */</span></span><br><span class="line"><span class="keyword">@charset</span> <span class="string">&quot;UTF-8&quot;</span>;</span><br><span class="line"><span class="keyword">@charset</span> <span class="string">&quot;iso-8859-15&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*@import 用于告css引擎引入一个外部样式表，必须先于所有其他类型的规则，@charset除外，@import也不是一个嵌套语句 */</span></span><br><span class="line"><span class="keyword">@import</span> url(<span class="string">&quot;fineprint.css&quot;</span>) print;</span><br><span class="line"><span class="keyword">@import</span> <span class="string">&#x27;custom.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*@support 用于查询特定的CSS是否生效，可以加上or、and、not等操作符进行判断 */</span></span><br><span class="line"><span class="keyword">@supports</span> (<span class="attribute">display</span>: <span class="attribute">grid</span>) &#123;</span><br><span class="line">  <span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: grid;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="伪类"><a href="#伪类" class="headerlink" title="伪类"></a>伪类</h3><h4 id="条件伪类"><a href="#条件伪类" class="headerlink" title="条件伪类"></a>条件伪类</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*:lang() 基于元素语言来匹配页面元素, 使用这个条件是在html中增加lang属性*/</span></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-pseudo">:lang</span>(en)&#123;</span><br><span class="line">	<span class="attribute">font-size</span>: <span class="number">25px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*对应的html*/</span></span><br><span class="line">&lt;<span class="selector-tag">div</span> lang=&quot;en&quot;&gt;English&lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*:dir() 匹配特定文字书写方向的元素*/</span></span><br><span class="line"><span class="comment">/* 使用直接在html标签上增加相应的属性就有效, rtl全拼是（Right To Left）， ltr全拼是（Left To Right）如下案例 */</span></span><br><span class="line">&lt;<span class="selector-tag">div</span> dir=&quot;rtl&quot;&gt;从右到左&lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">&lt;<span class="selector-tag">div</span> dir=&quot;ltr&quot;&gt;从右到左&lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*:has() 匹配包含指定元素的元素 */</span></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-pseudo">:has</span>(<span class="selector-tag">span</span>)&#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#008B8B</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*:is() 匹配指定选择器列表里的元素，可以简化深层嵌套 */</span></span><br><span class="line"><span class="selector-pseudo">:is</span>(<span class="selector-tag">div</span> <span class="selector-tag">p</span> <span class="selector-tag">span</span>)&#123;</span><br><span class="line">    <span class="attribute">background</span>: violet;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*:not() 匹配不符合一组选择器的元素 */</span></span><br><span class="line">    <span class="comment">/* 类名不是 `.fancy` 的 &lt;p&gt; 元素*/</span></span><br><span class="line">    <span class="selector-tag">p</span><span class="selector-pseudo">:not</span>(<span class="selector-class">.fancy</span>) &#123;</span><br><span class="line">      <span class="attribute">color</span>: green;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">/* 非 &lt;p&gt; 元素 */</span></span><br><span class="line">    <span class="selector-tag">body</span> <span class="selector-pseudo">:not</span>(<span class="selector-tag">p</span>) &#123;</span><br><span class="line">      <span class="attribute">text-decoration</span>: underline;</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>

<h4 id="行为伪类"><a href="#行为伪类" class="headerlink" title="行为伪类"></a>行为伪类</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*:active 鼠标激活的元素*/</span></span><br><span class="line"><span class="selector-tag">div</span> <span class="selector-tag">p</span> <span class="selector-tag">span</span><span class="selector-pseudo">:active</span>&#123;</span><br><span class="line">    <span class="attribute">background</span>: yellowgreen;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*:hover 鼠标悬浮的元素*/</span></span><br><span class="line"><span class="selector-pseudo">:is</span>(<span class="selector-tag">div</span> <span class="selector-tag">p</span> <span class="selector-tag">span</span>)<span class="selector-pseudo">:hover</span>&#123;</span><br><span class="line">    <span class="attribute">background</span>: aqua;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*::selection 鼠标选中的元素*/</span></span><br><span class="line"><span class="selector-tag">div</span> <span class="selector-tag">p</span> <span class="selector-tag">span</span><span class="selector-pseudo">::selection</span>&#123;</span><br><span class="line">    <span class="attribute">background</span>: yellowgreen;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="状态伪类"><a href="#状态伪类" class="headerlink" title="状态伪类"></a>状态伪类</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*:target 当前锚点的元素*/</span></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-pseudo">:target</span>&#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#f1fde7</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*:link 未访问的链接元素*/</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:link</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: gold;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*:visited 已访问的链接元素*/</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:visited</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: blue;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*:focus 输入聚焦的表单元素*/</span></span><br><span class="line"><span class="selector-tag">input</span><span class="selector-pseudo">:focus</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: lightblue;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*:required 输入必填的表单元素, 需要在表单标签，比如input、select等标签上增加required属性才会生效 */</span></span><br><span class="line"><span class="selector-tag">input</span><span class="selector-pseudo">:required</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: gold;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*:valid 输入合法的表单元素*/</span></span><br><span class="line"><span class="selector-tag">input</span><span class="selector-pseudo">:required</span><span class="selector-pseudo">:invalid</span> &#123;</span><br><span class="line">    <span class="attribute">border-color</span>: <span class="number">#c00000</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*:invalid 输入非法的表单元素*/</span></span><br><span class="line"><span class="selector-tag">input</span><span class="selector-pseudo">:invalid</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: ivory;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*:checked 选项选中的表单元素*/</span></span><br><span class="line"><span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:checked</span> &#123;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> <span class="number">3px</span> hotpink;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*:blank 输入为空的表单元素，这个是实验性技术，几乎不支持*/</span></span><br></pre></td></tr></table></figure>

<h4 id="结构伪类"><a href="#结构伪类" class="headerlink" title="结构伪类"></a>结构伪类</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*:root 文档的根元素*/</span></span><br><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">    <span class="attr">--main-color</span>: hotpink;</span><br><span class="line">    <span class="attr">--pane-padding</span>: <span class="number">5px</span> <span class="number">42px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">var</span>(--main-color);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*:empty 无子元素的元素*/</span></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-pseudo">:empty</span> &#123;</span><br><span class="line">    <span class="attribute">outline</span>: <span class="number">2px</span> solid deeppink;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">1em</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*:first-child 元素中为首的元素*/</span></span><br><span class="line"><span class="selector-tag">li</span><span class="selector-pseudo">:first</span>-child &#123;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">2px</span> solid orange;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*:last-child 元素中为尾的元素*/</span></span><br><span class="line"><span class="selector-tag">li</span><span class="selector-pseudo">:last-child</span> &#123;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">2px</span> solid orange;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*:nth-child(n) 元素中指定索引的元素*/</span></span><br><span class="line"><span class="selector-class">.first</span> <span class="selector-tag">span</span><span class="selector-pseudo">:nth-child</span>(<span class="number">2</span>n+<span class="number">1</span>),</span><br><span class="line"><span class="selector-class">.second</span> <span class="selector-tag">span</span><span class="selector-pseudo">:nth-child</span>(<span class="number">2</span>n+<span class="number">1</span>),</span><br><span class="line"><span class="selector-class">.third</span> <span class="selector-tag">span</span><span class="selector-pseudo">:nth-of-type</span>(<span class="number">2</span>n+<span class="number">1</span>) &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: lime;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h4 id="伪元素"><a href="#伪元素" class="headerlink" title="伪元素"></a>伪元素</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*::before 在元素前插入内容*/</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;♥&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*::after 在元素后插入内容*/</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">&#x27; (&#x27;</span> <span class="built_in">attr</span>(href) <span class="string">&#x27;)&#x27;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="继承性"><a href="#继承性" class="headerlink" title="继承性"></a>继承性</h3><p><strong>默认继承</strong>：</p>
<table>
<thead>
<tr>
<th>类型</th>
<th>属性</th>
</tr>
</thead>
<tbody><tr>
<td>字体相关</td>
<td>font-family、font-style、font-size、font-weight</td>
</tr>
<tr>
<td>文本相关</td>
<td>text-align、text-decoration、text-shadow、line-height、color</td>
</tr>
<tr>
<td>其他属性</td>
<td>list-style、visibility、cursor</td>
</tr>
</tbody></table>
<p><strong>控制继承</strong>：</p>
<table>
<thead>
<tr>
<th>类型</th>
<th>属性</th>
</tr>
</thead>
<tbody><tr>
<td>inherit</td>
<td>继承父元素对应的属性</td>
</tr>
<tr>
<td>initial</td>
<td>应用该属性的默认值</td>
</tr>
</tbody></table>
<h3 id="文档流"><a href="#文档流" class="headerlink" title="文档流"></a>文档流</h3><p><strong>块级元素</strong>：默认会占满整行，所以多个块级盒子之间是从上到下排列的；</p>
<p><strong>内联元素</strong>：默认会在一行里一列一列的排布，当一行放不下的时候，会自动切换到下一行继续按照列排布；</p>
<p><strong>脱离文档流</strong>：浮动（float）、绝对定位（position:absolute）、固定定位（position:fixed）</p>
<h3 id="媒体查询"><a href="#媒体查询" class="headerlink" title="媒体查询"></a>媒体查询</h3><p>media属性</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>all</td>
<td>适用于所有设备</td>
</tr>
<tr>
<td>print</td>
<td>适用在打印设备</td>
</tr>
<tr>
<td>screen</td>
<td>主要用于屏幕</td>
</tr>
<tr>
<td>speech</td>
<td>主要用于语音合成器</td>
</tr>
</tbody></table>
<p>@media 逻辑操作符： and（且）、or（或）、not（非）。</p>
<h3 id=""><a href="#" class="headerlink" title=""></a></h3><h2 id="CSS常用技巧"><a href="#CSS常用技巧" class="headerlink" title="CSS常用技巧"></a>CSS常用技巧</h2><h3 id="清除浮动"><a href="#清除浮动" class="headerlink" title="清除浮动"></a>清除浮动</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*BFC清除浮动*/</span></span><br><span class="line"><span class="selector-class">.parent</span>&#123;</span><br><span class="line">    <span class="attribute">overflow</span>:hidden;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*clear清除*/</span></span><br><span class="line"><span class="selector-class">.clearfix</span>&#123;</span><br><span class="line">    zoom: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">::after</span>&#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>,</span><br><span class="line">    display: block;</span><br><span class="line">    <span class="attribute">clear</span>: both;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="居中"><a href="#居中" class="headerlink" title="居中"></a>居中</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*水平居中*/</span></span><br><span class="line"><span class="selector-class">.parent</span>&#123;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*垂直居中*/</span></span><br><span class="line"><span class="selector-class">.single-line</span>&#123;</span><br><span class="line">    <span class="attribute">padding-top</span>： <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">padding-bottom</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.single-line</span>&#123;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*固定宽高*/</span></span><br><span class="line"><span class="comment">/*absolute+margin 需要设置固定宽高*/</span></span><br><span class="line"><span class="selector-class">.absolute-margin</span>&#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">margin</span>: auto;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.absolute-margin</span>&#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">margin</span>: -<span class="number">50px</span> <span class="number">0</span> <span class="number">0</span>-<span class="number">50px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*absolute-calc*/</span></span><br><span class="line"><span class="selector-class">.absolute-calc</span>&#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">left</span>: <span class="built_in">calc</span>(<span class="number">50%</span> - <span class="number">50px</span>);</span><br><span class="line">    <span class="attribute">top</span>: <span class="built_in">calc</span>(<span class="number">50%</span> - <span class="number">50px</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*下面的方案不需要固定宽高*/</span></span><br><span class="line"><span class="comment">/*absolute-transform*/</span></span><br><span class="line"><span class="selector-class">.absolute-transform</span>&#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*line-height+vertical-align*/</span></span><br><span class="line"><span class="selector-class">.line-vertical</span>&#123;</span><br><span class="line">    <span class="attribute">display</span>: inline-block;</span><br><span class="line">    <span class="attribute">line-height</span>: initial;</span><br><span class="line">    <span class="attribute">vertical-align</span>: middle;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*table-cell*/</span></span><br><span class="line"><span class="selector-class">.parent</span>&#123;</span><br><span class="line">    <span class="attribute">display</span>: table-cell;</span><br><span class="line">    <span class="attribute">vertical-align</span>: middle;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.child</span>&#123;</span><br><span class="line">    <span class="attribute">display</span>: inline-block;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*flex */</span></span><br><span class="line"><span class="selector-class">.parent</span>&#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">justify-content</span>: center;</span><br><span class="line">    align-item: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*grid*/</span></span><br><span class="line"><span class="selector-class">.parent</span>&#123;</span><br><span class="line">    <span class="attribute">display</span>: grid;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.child</span>&#123;</span><br><span class="line">    justify-self: center;</span><br><span class="line">    <span class="attribute">align-self</span>: center;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="长文本处理"><a href="#长文本处理" class="headerlink" title="长文本处理"></a>长文本处理</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*字符超出部分换行*/</span></span><br><span class="line"><span class="attribute">overflow-wrap</span>: break-word;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*字符超出位置使用连字符*/</span></span><br><span class="line"><span class="attribute">hyphens</span>: auto;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*单行文本超出省略*/</span></span><br><span class="line"><span class="selector-class">.ellipsis</span>&#123;</span><br><span class="line">    // <span class="attribute">max-width</span>: <span class="number">165px</span>;  <span class="comment">/*需要设置最大宽度，默认为100%，flex里面可能会无效*/</span></span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">    <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">    <span class="attribute">text-overflow</span>: ellipsis;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*多行文本超出省略*/</span></span><br><span class="line"><span class="selector-class">.ellipsis-2</span> &#123;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">text-overflow</span>: ellipsis;</span><br><span class="line">  <span class="attribute">display</span>: -webkit-box;</span><br><span class="line">  -webkit-line-clamp: <span class="number">2</span>;</span><br><span class="line">  -webkit-box-orient: vertical;</span><br><span class="line">  // <span class="attribute">height</span>:<span class="number">50px</span>; <span class="comment">/*需要设置最高的高度，超出高度部分不显示*/</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>




<h2 id="CSS使用方法"><a href="#CSS使用方法" class="headerlink" title="CSS使用方法"></a>CSS使用方法</h2><p>主要使用方法有4种：内联样式、内部样式、使用link标记连接外部样式表、使用css的@import标记导入外部样式文件。</p>
<h3 id="行内样式-x2F-内联样式"><a href="#行内样式-x2F-内联样式" class="headerlink" title="行内样式&#x2F;内联样式"></a>行内样式&#x2F;内联样式</h3><p>两者表达的是同一个意思，具体实现如以下代码：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="selector-tag">a</span> style=&quot;<span class="attribute">color</span>:red;&quot;&gt;测试&lt;/<span class="selector-tag">a</span>&gt;</span><br></pre></td></tr></table></figure>

<h3 id="内部样式"><a href="#内部样式" class="headerlink" title="内部样式"></a>内部样式</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;style type=&quot;text/css&quot;&gt;</span><br><span class="line"><span class="selector-tag">p</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">28px</span>;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<h3 id="外部样式-x2F-外联样式"><a href="#外部样式-x2F-外联样式" class="headerlink" title="外部样式&#x2F;外联样式"></a>外部样式&#x2F;外联样式</h3><h4 id="link引入"><a href="#link引入" class="headerlink" title="link引入"></a>link引入</h4><p>样式表以单独的文件（文件后缀一般为.css）存放，让网站的所有页面通过link标记均可引用此样式文件。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span> <span class="attr">href</span>=<span class="string">&quot;样式表源文件地址&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="import引入"><a href="#import引入" class="headerlink" title="@import引入"></a>@import引入</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="keyword">@import</span> url(css/外部样式表.css);</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="样式的优先级"><a href="#样式的优先级" class="headerlink" title="样式的优先级"></a>样式的优先级</h3><p>就近原则：行内样式&#x2F;内联样式 ＞ 内部样式 &#x3D;&#x3D; 外部样式（后面覆盖前面）；注意事项：尽量不要对同个html进行多个样式书写。</p>
<h3 id="样式选择"><a href="#样式选择" class="headerlink" title="样式选择"></a>样式选择</h3><p>如果是通用样式则选择内部样式、外部样式，当样式内容过多时，将样式单独抽离成.css文件，方便管理；当某个标签样式特殊，出现次数唯一的情况下，可以用行内样式&#x2F;内联样式。</p>
<h1 id="常见问题"><a href="#常见问题" class="headerlink" title="常见问题"></a>常见问题</h1><h2 id="对css的sprites的理解"><a href="#对css的sprites的理解" class="headerlink" title="对css的sprites的理解"></a>对css的sprites的理解</h2><p>css sprites(精灵图)，将一个页面涉及到的所有图片都包含到一张大图中去，然后利用css的<code>background-image</code>，<code>background-repeat</code>、<code>background-position</code>属性的组合进行背景定位；</p>
<p>优点：利用css sprites能很好地减少网页的http请求，大大提高性能；减少图片字节，把3张图片合成一张的字节总是小于3张图片的字节总和；</p>
<p>缺点：图片合并时，要把多张图片有序的、合理的合成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂。</p>
<p><em><strong>附录：</strong></em></p>
<p><a target="_blank" rel="noopener external nofollow noreferrer" href="https://cloud.tencent.com/developer/section/1072304">命名空间 | @namespace (Namespaces) - CSS 中文开发手册 - 开发者手册 - 腾讯云开发者社区-腾讯云 (tencent.com)</a></p>
<p><a target="_blank" rel="noopener external nofollow noreferrer" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/@document">@document - CSS：层叠样式表 | MDN (mozilla.org)</a></p>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://lemonxu.eu.org">Lemonxu</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://lemonxu.eu.org/2023/06/16/CSS/CSS/">https://lemonxu.eu.org/2023/06/16/CSS/CSS/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow noreferrer" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://lemonxu.eu.org" target="_blank">Lemonxu's Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/blog/tags/CSS-%E5%9F%BA%E7%A1%80/">CSS, 基础</a></div><div class="post_share"><div class="social-share" data-image="/blog/images/bg/649.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/blog/2023/06/25/javascript/" title="javascript"><img class="cover" src="/blog/images/bg/646.jpg" onerror="onerror=null;src='/blog/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">javascript</div></div></a></div><div class="next-post pull-right"><a href="/blog/2023/05/31/responsive-html/responsive-html/" title="前端响应式网站设计"><img class="cover" src="/blog/images/bg/641.jpg" onerror="onerror=null;src='/blog/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">前端响应式网站设计</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div><div id="comment-switch"><span class="first-comment">Valine</span><span class="switch-btn"></span><span class="second-comment">Disqus</span></div></div><div class="comment-wrap"><div><div class="vcomment" id="vcomment"></div></div><div><div id="disqus_thread"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/blog/images/user.jpg" onerror="this.onerror=null;this.src='/blog/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Lemonxu</div><div class="author-info__description">一个以前端开发为主的博客，一个专注前端的开发人员</div></div><div class="card-info-data site-data is-center"><a href="/blog/archives/"><div class="headline">文章</div><div class="length-num">4</div></a><a href="/blog/tags/"><div class="headline">标签</div><div class="length-num">4</div></a><a href="/blog/categories/"><div class="headline">分类</div><div class="length-num">8</div></a></div><a id="card-info-btn" target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/Lemonxu"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/Lemonxu" rel="external nofollow noreferrer" target="_blank" title="Github"><i class="fab fa-github" style="color: #24292e;"></i></a><a class="social-icon" href="mailto:yunfeng7@foxmail.com" rel="external nofollow noreferrer" target="_blank" title="Email"><i class="fas fa-envelope" style="color: #4a7dbe;"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS%E5%9F%BA%E7%A1%80"><span class="toc-number">1.</span> <span class="toc-text">CSS基础</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E7%9F%A5%E8%AF%86"><span class="toc-number">1.1.</span> <span class="toc-text">基本知识</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AF%AD%E6%B3%95"><span class="toc-number">1.1.1.</span> <span class="toc-text">语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">1.1.2.</span> <span class="toc-text">选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%80%89%E6%8B%A9%E5%99%A8%E5%88%86%E7%B1%BB"><span class="toc-number">1.1.2.1.</span> <span class="toc-text">选择器分类</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%80%89%E6%8B%A9%E5%99%A8%E4%BC%98%E5%85%88%E7%BA%A7"><span class="toc-number">1.1.2.2.</span> <span class="toc-text">选择器优先级</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%92%E6%A8%A1%E5%9E%8B"><span class="toc-number">1.1.3.</span> <span class="toc-text">盒模型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A7%84%E5%88%99"><span class="toc-number">1.1.4.</span> <span class="toc-text">@规则</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BC%AA%E7%B1%BB"><span class="toc-number">1.1.5.</span> <span class="toc-text">伪类</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%9D%A1%E4%BB%B6%E4%BC%AA%E7%B1%BB"><span class="toc-number">1.1.5.1.</span> <span class="toc-text">条件伪类</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%A1%8C%E4%B8%BA%E4%BC%AA%E7%B1%BB"><span class="toc-number">1.1.5.2.</span> <span class="toc-text">行为伪类</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%8A%B6%E6%80%81%E4%BC%AA%E7%B1%BB"><span class="toc-number">1.1.5.3.</span> <span class="toc-text">状态伪类</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BB%93%E6%9E%84%E4%BC%AA%E7%B1%BB"><span class="toc-number">1.1.5.4.</span> <span class="toc-text">结构伪类</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BC%AA%E5%85%83%E7%B4%A0"><span class="toc-number">1.1.5.5.</span> <span class="toc-text">伪元素</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%A7%E6%89%BF%E6%80%A7"><span class="toc-number">1.1.6.</span> <span class="toc-text">继承性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E6%A1%A3%E6%B5%81"><span class="toc-number">1.1.7.</span> <span class="toc-text">文档流</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2"><span class="toc-number">1.1.8.</span> <span class="toc-text">媒体查询</span></a></li><li class="toc-item toc-level-3"><a class="toc-link"><span class="toc-number">1.1.9.</span> <span class="toc-text"></span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS%E5%B8%B8%E7%94%A8%E6%8A%80%E5%B7%A7"><span class="toc-number">1.2.</span> <span class="toc-text">CSS常用技巧</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8"><span class="toc-number">1.2.1.</span> <span class="toc-text">清除浮动</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B1%85%E4%B8%AD"><span class="toc-number">1.2.2.</span> <span class="toc-text">居中</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%95%BF%E6%96%87%E6%9C%AC%E5%A4%84%E7%90%86"><span class="toc-number">1.2.3.</span> <span class="toc-text">长文本处理</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95"><span class="toc-number">1.3.</span> <span class="toc-text">CSS使用方法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A1%8C%E5%86%85%E6%A0%B7%E5%BC%8F-x2F-%E5%86%85%E8%81%94%E6%A0%B7%E5%BC%8F"><span class="toc-number">1.3.1.</span> <span class="toc-text">行内样式&#x2F;内联样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%86%85%E9%83%A8%E6%A0%B7%E5%BC%8F"><span class="toc-number">1.3.2.</span> <span class="toc-text">内部样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F-x2F-%E5%A4%96%E8%81%94%E6%A0%B7%E5%BC%8F"><span class="toc-number">1.3.3.</span> <span class="toc-text">外部样式&#x2F;外联样式</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#link%E5%BC%95%E5%85%A5"><span class="toc-number">1.3.3.1.</span> <span class="toc-text">link引入</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#import%E5%BC%95%E5%85%A5"><span class="toc-number">1.3.3.2.</span> <span class="toc-text">@import引入</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A0%B7%E5%BC%8F%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7"><span class="toc-number">1.3.4.</span> <span class="toc-text">样式的优先级</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A0%B7%E5%BC%8F%E9%80%89%E6%8B%A9"><span class="toc-number">1.3.5.</span> <span class="toc-text">样式选择</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98"><span class="toc-number">2.</span> <span class="toc-text">常见问题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AF%B9css%E7%9A%84sprites%E7%9A%84%E7%90%86%E8%A7%A3"><span class="toc-number">2.1.</span> <span class="toc-text">对css的sprites的理解</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/blog/2023/06/25/javascript/" title="javascript"><img src="/blog/images/bg/646.jpg" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="javascript"/></a><div class="content"><a class="title" href="/blog/2023/06/25/javascript/" title="javascript">javascript</a><time datetime="2023-06-25T09:39:57.000Z" title="发表于 2023-06-25 17:39:57">2023-06-25</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/2023/06/16/CSS/CSS/" title="CSS"><img src="/blog/images/bg/649.jpg" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="CSS"/></a><div class="content"><a class="title" href="/blog/2023/06/16/CSS/CSS/" title="CSS">CSS</a><time datetime="2023-06-16T03:57:58.000Z" title="发表于 2023-06-16 11:57:58">2023-06-16</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/2023/05/31/responsive-html/responsive-html/" title="前端响应式网站设计"><img src="/blog/images/bg/641.jpg" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="前端响应式网站设计"/></a><div class="content"><a class="title" href="/blog/2023/05/31/responsive-html/responsive-html/" title="前端响应式网站设计">前端响应式网站设计</a><time datetime="2023-05-31T01:07:50.000Z" title="发表于 2023-05-31 09:07:50">2023-05-31</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/2023/05/18/html/html/" title="HTML"><img src="/blog/images/bg/649.jpg" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="HTML"/></a><div class="content"><a class="title" href="/blog/2023/05/18/html/html/" title="HTML">HTML</a><time datetime="2023-05-18T03:46:54.000Z" title="发表于 2023-05-18 11:46:54">2023-05-18</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2023 By Lemonxu</div><div class="footer_custom_text">本博客由Lemonxu使用Hexo搭建，部分素材来自网络，如有侵权请联系删除</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="chat_btn" type="button" title="聊天"><i class="fas fa-sms"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/blog/js/utils.js"></script><script src="/blog/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><div class="js-pjax"><script>function loadValine () {
  function initValine () {
    const valine = new Valine(Object.assign({
      el: '#vcomment',
      appId: '',
      appKey: '',
      avatar: 'monsterid',
      serverURLs: '',
      emojiMaps: "",
      path: window.location.pathname,
      visitor: false
    }, null))
  }

  if (typeof Valine === 'function') initValine() 
  else getScript('https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js').then(initValine)
}

if ('Valine' === 'Valine' || !true) {
  if (true) btf.loadComment(document.getElementById('vcomment'),loadValine)
  else setTimeout(loadValine, 0)
} else {
  function loadOtherComment () {
    loadValine()
  }
}</script><script>function loadDisqus () {
  const disqus_config = function () {
    this.page.url = 'https://lemonxu.eu.org/2023/06/16/CSS/CSS/'
    this.page.identifier = '/blog/2023/06/16/CSS/CSS/'
    this.page.title = 'CSS'
  }

  const disqusReset = () => {
    DISQUS.reset({
      reload: true,
      config: disqus_config
    })
  }

  btf.addModeChange('disqus', disqusReset)

  if (window.DISQUS) disqusReset()
  else {
    (function() { 
      var d = document, s = d.createElement('script');
      s.src = 'https://.disqus.com/embed.js';
      s.setAttribute('data-timestamp', +new Date());
      (d.head || d.body).appendChild(s);
    })();
  }
}

if ('Valine' === 'Disqus' || !true) {
  if (true) btf.loadComment(document.getElementById('disqus_thread'), loadDisqus)
  else loadDisqus()
} else {
  function loadOtherComment () {
    loadDisqus()
  }
}
</script></div><script defer="defer" id="fluttering_ribbon" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-fluttering-ribbon.min.js"></script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors = ["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax"]

var pjax = new Pjax({
  elements: 'a:not([target="_blank"]):not([href="/music/"]):not([href="/no-pjax/"])',
  selectors: pjaxSelectors,
  cacheBust: false,
  analytics: false,
  scrollRestoration: false
})

document.addEventListener('pjax:send', function () {

  // removeEventListener scroll 
  window.tocScrollFn && window.removeEventListener('scroll', window.tocScrollFn)
  window.scrollCollect && window.removeEventListener('scroll', scrollCollect)

  document.getElementById('rightside').style.cssText = "opacity: ''; transform: ''"
  
  if (window.aplayers) {
    for (let i = 0; i < window.aplayers.length; i++) {
      if (!window.aplayers[i].options.fixed) {
        window.aplayers[i].destroy()
      }
    }
  }

  typeof typed === 'object' && typed.destroy()

  //reset readmode
  const $bodyClassList = document.body.classList
  $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')

  typeof disqusjs === 'object' && disqusjs.destroy()
})

document.addEventListener('pjax:complete', function () {
  window.refreshFn()

  document.querySelectorAll('script[data-pjax]').forEach(item => {
    const newScript = document.createElement('script')
    const content = item.text || item.textContent || item.innerHTML || ""
    Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
    newScript.appendChild(document.createTextNode(content))
    item.parentNode.replaceChild(newScript, item)
  })

  GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()

  typeof chatBtnFn === 'function' && chatBtnFn()
  typeof panguInit === 'function' && panguInit()

  // google analytics
  typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});

  // baidu analytics
  typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);

  typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()

  // prismjs
  typeof Prism === 'object' && Prism.highlightAll()
})

document.addEventListener('pjax:error', (e) => {
  if (e.request.status === 404) {
    pjax.loadUrl('/404.html')
  }
})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>